<template>
	<view style="width: 710rpx;margin: 0 auto;padding-top: 20rpx;" class="swiper-con">
		<u-swiper @click="clickSwiper" interval="5000" duration="500" height="270" v-if="res" name="img"
			:list="res.list">
			<u-loading slot="loading"></u-loading>
		</u-swiper>
	</view>
</template>

<script>
	import {
		modelNavigateTo
	} from "./tpl";
	export default {
		title: "导航栏",
		props: ["res"],
		watch: {
			res: {
				handler(newValue, oldValue) {
					this.$set(this, "res", newValue);
				},
				deep: true,
			},
		},

		mounted() {

		},
		methods: {
			clickSwiper(index) {
				modelNavigateTo(this.res.list[index]);
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "./tpl.scss";

	.swiper-con ::v-deep .u-indicator-item-round {
		background-color: rgba(255, 255, 255, 0.8) !important;
	}

	.swiper-con ::v-deep .u-indicator-item-round-active {
		background-color: #EA0308 !important;
	}
</style>